import variables from "@/style/variables.module.scss"
export const useSettingStore = defineStore("setting", () => {
  const settings = reactive({
    theme: variables.themeColor,
    originalTheme: ""
  })

  const otherSettings = reactive({
    isShowTagsView: true
  })

  const theme = computed(() => {
    return settings.theme
  })

  const originalTheme = computed(() => {
    return settings.originalTheme
  })

  type ThemeKey = typeof settings

  const changeTheme = (
    themeKey: keyof ThemeKey,
    themeValue: ThemeKey[keyof ThemeKey]
  ) => {
    settings[themeKey] = themeValue
    console.log("settings", settings)
  }

  const changeShowTagsView = (visible: boolean) => {
    otherSettings.isShowTagsView = visible
  }
  return {
    theme,
    originalTheme,
    otherSettings,
    settings,
    changeTheme,
    changeShowTagsView
  }
})
